// 创建文件 src/network/request.js

// 引入axios
import axios from "axios"

// 创建axios实例并导出
// 基本使用
/* export function request(config) {
  const instans = axios.create({
    baseURL : "http://152.136.185.210:8000/api/w6",
    timeout : 5000
  })
  instans(config)
  .then(res => {
    console.log(res);
  })
  .catch(err => {
    console.log(err);
  })
} */
// 如何使用
/* import request from "./network/request"
request({
  url : "/home/multidata"
}) */


// 2. 通过组件传入一个函数, 然后回调这个函数返回数据给组件
/* export function request(config,success,error) {
  const instans = axios.create({
    baseURL : "http://152.136.185.210:8000/api/w6"
  })
  instans(config)
  .then(res => {
    success(res)
  })
  .catch(err => {
    error(err)
  })
} */
// 如何使用
/* import request from "./network/request"
request(
  {
    url: "/home/multidata",
  },
  (res) => {
    console.log(res);
    this.res = res;
  }
); */

// 2.1 通过组件传入一个函数, 然后回调这个函数返回数据给组件的另外一种形式
/* export function request(config) {
  const instans = axios.create({
    baseURL : "http://152.136.185.210:8000/api/w6"
  })
  instans(config.baseConfig)
  .then(res => {
    config.success(res)
  })
  .catch(err => {
    config.error(err)
  })
} */
// 使用方法
/* request({
  baseConfig: {
    url: "/home/multidata",
  },
  success: function (res) {
    console.log(res);
  },
  error: function (err) {
    console.log(err);
  },
}); */

// 3. 实际上, 我们并不会使用以上的两种方法, 而是使用 Promise来返回数据
/* export function request(config) {
  const instans = axios.create({
    baseURL : "http://152.136.185.210:8000/api/w6"
  })
  return new Promise((resolve, reject) => {
    instans(config)
    .then((res) => {
      resolve(res)
    })
    .catch(err => {
      reject(err)
    })
  })
} */
// 使用方法
/* request({
    url: "/home/multidata",
  })
  .then((res) => {
    this.res = res;
  })
  .catch((err) => {
    console.log(err);
  });
 */

// 3.1 实际上, 我们也不会像上面那样, 因为axios本身就返回一个Promise, 没有必要再包一层
export function request(config) {
  const instans = axios.create({
    baseURL : "http://152.136.185.210:8000/api/w6"
  })
  // 使用拦截器
  // 请求拦截器
  instans.interceptors.request.use(config => {
    console.log(config);
    return config  // 将数据在return出去
  }, err => {
    console.log(err);
  })

  // 响应拦截器
  instans.interceptors.response.use(res => {
    console.log(res);
    return res.data  // 将数据进行过滤, 只返回data
  }, err => {
    console.log(err);
  })

  // 发送真实的网络请求
  return instans(config)
}
// 使用方法
/* request({
  url: "/home/multidata",
})
.then((res) => {
  this.res = res;
})
.catch((err) => {
  console.log(err);
}); */
